<template>
  <el-drawer v-model="drawer" @close="close" :append-to-body="true" size="400px" :modal="false" class="drawerTable">
    <template #header>
        <el-row align="middle">
            <el-icon color="var(--el-color-primary-dark-2)" size="18px" style="margin-right:3px;"><ele-Filter /></el-icon>
            <h4>综合筛选</h4>
        </el-row>
    </template>
    <div class="closePop" @click="close"></div>
    <el-form :model="filter" ref="ruleRefForm" label-position="top" class="filterForm">
        <el-form-item prop="teamList" label="团队">
            <el-checkbox-group v-model="filter.teamList" style="margin-left:20px;">
                <el-row v-for="item in teamList" :key="item.value">
                    <el-checkbox :label="item.value">{{item.name}}</el-checkbox>
                </el-row>
            </el-checkbox-group>
        </el-form-item>
        <el-divider border-style="dotted" />
        <el-form-item prop="customerList" label="客户状态">
            <el-select v-model="filter.customerList" clearable placeholder="请选择">
                <el-option v-for="item in customerList" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
<!--            <el-checkbox-group v-model="filter.customerList" style="margin-left:20px;" @change="filterSearch">-->
<!--                <el-row v-for="item in customerList" :key="item.id">-->
<!--                    <el-checkbox :label="item.value">{{item.name}}</el-checkbox>-->
<!--                </el-row>-->
<!--            </el-checkbox-group>-->
        </el-form-item>
        <el-divider border-style="dotted" />
        <!-- 功能重复 -->
<!--        <el-form-item prop="statusList" label="状态">-->
<!--            <el-checkbox-group v-model="filter.statusList" style="margin-left:20px;" @change="filterSearch">-->
<!--                <el-row v-for="item in statusList" :key="item.id">-->
<!--                    <el-checkbox :label="item.id">{{item.name}}</el-checkbox>-->
<!--                </el-row>-->
<!--            </el-checkbox-group>-->
<!--        </el-form-item>-->
    </el-form>
  </el-drawer>
</template>

<script>
import {computed, toRefs, ref, reactive, onMounted} from 'vue'
import {stageStatusCache} from "/@/stores/ums/customer/stageStatusStores";
import {storeToRefs} from "pinia";

export default {
    name: 'TableFilter',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        }
    },
    emits: ['update:dialogDrawer'],
    setup(props, context) {
        const {list: stageList} = storeToRefs(stageStatusCache())

        const { dialogDrawer } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
                // 当关闭抽屉时调用搜索
                context.emit('search', state.filter)
            }
        })
        const ruleRefForm = ref()
        const state = reactive({
            filter: {
                teamList: [],
                customerList: '',
                statusList: []
            },
            teamList: [{name: '我团队的客户', value: 0}, {name: '其他', value: 1}],
            customerList: [{name: '合作客户', value: 0}, {name: '未合作客户', value: 1}],
            statusList: []
        })

        state.statusList = stageList

        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        /** 加载阶段列表 */
        // const loadMemberStageData = ()=>{
        //     state.statusList = stageStatusCache().getList()
        // }
        // onMounted(()=>{
        //     loadMemberStageData()
        // })
        return {
            drawer,
            ruleRefForm,
            close,
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
.filterForm {
    padding: 20px;
}
.closePop{
    position: fixed;
    top: 0;
    left: 0;
    right: 400px;
    bottom: 0;
}
</style>
